import React, {useRef, useState, useEffect} from 'react'

export default function () {
  const inputEl = useRef(null)
  function setInput() {
    console.log(inputEl)
    inputEl.current.value = 'Hello JSPang'
  }

  const [text, setText] = useState('')
  const textRef = useRef()

  useEffect(()=>{
    textRef.current = text
    console.log('textRef.current', textRef.current)
  }, )



  return (
    <>
      <input ref={inputEl} type="text" placeholder="使用 ref"/>
      <button onClick={setInput}>设置 input 值</button>

      <hr/>

      <input
        value={text}
        onChange={(e)=>{setText(e.target.value)}}
        type="text"
        placeholder="使用 state 保存值"
      />
    </>
  )
}
